<template>
  <div class="list-container">
    <van-tabs v-model:active="activeName">
      <van-tab title="全部" name="2">
        <div v-if="activeName == 2" class="card">
          <ListItem></ListItem>
        </div>
      </van-tab>
      <van-tab title="未整改" name="0">
        <div v-if="activeName == 0" class="card">
          <ListItem :status="0"></ListItem>
        </div>
      </van-tab>
      <van-tab title="已整改" name="1">
        <div v-if="activeName == 1" class="card">
          <ListItem :status="1"></ListItem>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { ref } from '@vue/reactivity'
import request from '@utils/request'
import ListItem from '@/components/ListItem.vue'

export default {
  name: 'HomeView',
  setup () {
    const count = ref(1)
    const list = ref([])
    const loading = ref(false)
    const finished = ref(false)

    const onLoad = () => {
      request.post('/photo/list', {
        pageSize: 20,
        page: count.value
      }).then(resp => {
        list.value = list.value.concat(resp.rows.map(col => {
          return {
            ...col,
            image: col.images ? col.images.split(',')[0] : ''
          }
        }))
        count.value++
        loading.value = false
        if (resp.rows.length <= 0) finished.value = true
      })
    }
    return {
      list,
      onLoad,
      loading,
      finished
    }
  },
  components: {
    ListItem
  }
}
</script>

style <style lang="less" scoped>
  .card {
    border-radius: 5px;
    border: 1px solid #ebeef5;
    background-color: #fff;
    padding: 10px;
    overflow: hidden;
    color: #273272;
    transition: .3s;
    box-shadow: 0 0 18px 0 rgb(0 0 0 / 5%);
    margin: 16px;
  }
</style>
